<template>
  <div class="app">
    <div class="sidebar">
      <el-menu
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
      >
        <el-menu-item index="/importFile">
          <i class="el-icon-upload"></i>
          <span slot="title">导入文件</span>
        </el-menu-item>
        <el-menu-item index="/setColumn">
          <i class="el-icon-s-tools"></i>
          <span slot="title">设置摘要</span>
        </el-menu-item>
        <el-menu-item index="/cmpResult">
          <i class="el-icon-s-claim"></i>
          <span slot="title">对比结果</span>
        </el-menu-item>
        <el-menu-item index="/about">
          <i class="el-icon-info"></i>
          <span slot="title">关于</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="main">
      <router-view />
    </div>
  </div>
</template>

<style lang="scss">
body {
  margin: 0;
}
</style>

<style scoped lang="scss">
.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 10em;
  flex-shrink: 0;

  .el-menu {
    height: 100%;
  }
}

.main {
  flex-grow: 1;
  margin: 1em;
}
</style>
